<template>
	<view class="homecontent">
		<scroll-view scroll-y="true" enable-flex class="mainscroll" >
		<!-- 头部轮播 -->	
		 <view class="headerSwiper">	
	      <swiper class="swiperList" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			    <swiper-item class="swiperItem" >
				  	<image class="swiperImg" src="https://resource.smartisan.com/resource/15281a93ab968555ba3bd7a911b14f68.png"></image>
			    </swiper-item>
					<swiper-item class="swiperItem" >
						<image class="swiperImg" src="https://resource.smartisan.com/resource/48bf30c86c996662ecf795002215f023.png"></image>
					</swiper-item>
		    </swiper>
		 </view>
		<!-- 中心推荐 -->
			<Floor></Floor>
    <!-- 瀑布流 -->
		<view class="warterFull">
			 <view class="wtfLeft"  >
				 <view v-for="(c1,index) in wtfLeftData" :key="c1.skuId" style="border: 2upx solid #afafaf;margin-bottom: 6upx;">
				  <image class="LeftItem"  :src="c1.images"></image>
					<view class="textLefg">{{c1.spuTitle}}</view>
					<view class="priceLeft">¥ {{c1.discountPrice}}</view>
				</view>
			 </view>
			 
			 <view class="wtfRight">
				 <view v-for="(c2,index) in wtfRightData" :key="c2.skuId" style="border: 2upx solid #afafaf;margin-bottom: 6upx;">
				  <image class="rightItem"  :src="c2.images"></image>
					<view class="textRight">{{c2.spuTitle}}</view>  
					<view class="priceRight">¥ {{c2.discountPrice}}</view>
				</view>
			 </view>
		</view>
		
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import Floor from './components/Floor'
	export default {
		name:'index',
		data(){
			return{
				
			}
		},
		components:{
		  Floor,
		},
		 mounted(){
		      this.getIndexData(),
					this.getindexwarterFull()
		    },
		methods:{
		      getIndexData(){
		        this.$store.dispatch('home/getIndexData')
		      },
					getindexwarterFull(){
						this.$store.dispatch('home/getindexwarterFull')
					}
		    },
		computed:{
				...mapState('home',['indexData','indexwtfData']),
				wtfLeftData(){
					return this.indexwtfData.filter((item,index) =>index % 2 == 0 )
				},
				wtfRightData(){
					return this.indexwtfData.filter((item, index) => index % 2 !== 0)
				}
				
			}
	}
</script>

<style lang='stylus'>
.mainscroll
	height: 100%
	.headerSwiper
		height: 492upx
		.swiperList
			height: 492upx
			.swiperImg
				width: 100%
				height: 492upx
  .warterFull
		display: flex
		margin-left: 20upx
		.wtfLeft
			display: flex
			flex-direction: column
			width: 50%
			.LeftItem
				width: 338upx
				height: 438upx
				margin-bottom: 18upx
			.textLefg
				font-size: 32upx
				font-weight: 600
				margin-left: 10upx
				color: #4b4b4b
			.priceLeft
				font-size: 28upx
				font-weight: 600
				margin-left: 10upx
				color: #d04b43
		.wtfRight
			display: flex
			flex-direction: column
			width: 50%
			.rightItem
				width: 338upx
				height: 470upx
				margin-bottom: 18upx
		  .textRight
				font-size: 32upx
				font-weight: 600
				margin-left: 10upx
				color: #4b4b4b
			.priceRight
				font-size: 28upx
				font-weight: 600
				margin-left: 10upx
				color: #d04b43
			

			
			
	 
</style>
